<template>
    <Card style="width:100%; height:100%;margin-top:20px;background: #01237C;">
    <p slot="title" style="padding-left:30px;">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        数据统计
    </p>
    <!-- 加油区全景 -->
    <div class="fuel_all" v-if="iscategory()==6">
        <Row type="flex" justify="start" >
            <Icon type="md-car" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>当日累积服务车辆：</span>
            <span class='white'>{{fuel_car}}</span>
            <span class='white'>辆</span>
        </Row>
        <Row type="flex" justify="start"  class="underrow">
            <Icon custom="iconfont iconyongdudu" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>加油区拥堵情况：</span>
            <span class='white'>{{jam_state}}</span>
        </Row>
        <Row type="flex" justify="start" class="underrow">
            <Icon custom="iconfont iconjiayouzhan" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>未指示油枪回零占比：</span>
            <span class='white'>{{gun}}</span>
            <span class='white'>%</span>
        </Row>
        <Row type="flex" justify="start" class="underrow">
            <Icon custom="iconfont iconbaoyangjiayou" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>单手加油占比：</span>
            <span class='white'>{{singlehand}}</span>
            <span class='white'>%</span>
        </Row>
        <Row type="flex" justify="start" class="underrow">
            <Icon type="md-compass" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>未进行引导占比：</span>
            <span class='white'>{{woguide}}</span>
            <span class='white'>%</span>
        </Row>
        <Row type="flex" justify="start" class="underrow">
            <Icon type="md-close-circle" style="font-size:2rem;padding:5px; color:#fff;" />
            <span class='white'>车到人未到占比：</span>
            <span class='white'>{{woshow}}</span>
            <span class='white'>%</span>
        </Row>
    </div>
    <div v-else class="demo-split" style="text-align:left;">
        <Split v-model="split2" mode="vertical">
            <div slot="top" class="demo-split-pane">
                <!-- 加油区 -->
                <div v-if="iscategory()==2" class="reful" >
                    <Row type="flex" justify="start" >
                        <Icon type="md-car" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>当日累积服务车辆：</span>
                        <span class='white'>{{fuel_car}}</span>
                        <span class='white'>辆</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow" >
                        <Icon type="ios-time" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>当日平均服务时间：</span>
                        <span class='white'>{{fuel_time[0]}}</span>
                        <span class='white'>分</span>
                        <span class='white'>{{fuel_time[1]}}</span>
                        <span class='white'>秒</span>
                    </Row>
                </div>
                <!-- 卸油区 -->
                <div  class="unload" v-if="iscategory()==1" >
                    <Row type="flex" justify="start" >
                        <Icon type="md-contact" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>姓名：</span>
                        <span class='white'>{{worker.name}}</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow">
                        <Icon type="ios-ribbon" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>职位：</span>
                        <span class='white'>{{worker.position}}</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow">
                        <Icon custom="iconfont iconid" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>工号：</span>
                        <span class='white'>{{worker.no}}</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow">
                        <Icon type="md-warning" style="font-size:2rem;padding:5px; color:yellow;" />
                        <span class='white'>违规次数：</span>
                        <span class='white' style="color:red;">{{against_times}}</span>
                        <span class='white'>次</span>
                    </Row>
                     <Row type="flex" justify="start" class="underrow">
                        <Icon v-if="ischecked" type="md-construct" style="font-size:2rem;padding:5px; color: green;" />
                        <Icon v-else type="md-construct" style="font-size:2rem;padding:5px; color: yellow;" />
                        <span v-if="ischecked" class='white'>设备已巡检</span>
                        <span  v-else class='white'>设备未巡检</span>
                    </Row>
                </div>
                <!-- 收银台 -->
                <div  class="checkout" v-if="iscategory()==3">
                    <Row type="flex" justify="start" >
                        <Icon type="md-basket" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>当日累积服务次数：</span>
                        <span class='white'>{{service_times}}</span>
                        <span class='white'>次</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow">
                            <Icon type="md-warning" style="font-size:2rem;padding:5px; color:yellow;" />
                            <span class='white'>违规次数占比：</span>
                            <span class='white' style="color:red;">{{against_perc}}</span>
                            <span class='white' style="color:red;">%</span>
                        </Row>
                </div>
                <!-- 办公室保险柜 -->
                <div  class="safebox" v-if="iscategory()==4">
                     <Row type="flex" justify="start" >
                        <Icon custom="iconfont iconbaoxiangui" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>保险柜打开：</span>
                        <span class='white'>{{safebox_open}}</span>
                        <span class='white'>次</span>
                    </Row>
                     <Row type="flex" justify="start" class="underrow">
                        <Icon type="md-basket" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>钱箱打开：</span>
                        <span class='white'>{{case_open}}</span>
                        <span class='white'>次</span>
                    </Row>
                    <Row type="flex" justify="start" class="underrow">
                            <Icon type="md-warning" style="font-size:2rem;padding:5px; color:yellow;" />
                            <span class='white'>违规次数占比：</span>
                            <span class='white' style="color:red;">{{against_perc}}</span>
                            <span class='white' style="color:red;">%</span>
                    </Row>
                </div>
                <!-- 超市大门 -->
                <div class="store" v-if="iscategory()==5">
                    <Row type="flex" justify="start"  >
                        <Icon type="md-contacts" style="font-size:2rem;padding:5px; color:#fff;" />
                        <span class='white'>今日累积进店人数：</span>
                        <span class='white'>{{indoor}}</span>
                        <span class='white'>人</span>
                    </Row>
                </div>
            </div>
            <div slot="bottom" class="demo-split-pane-bottom">
                <Table height="642" :loading="loading" :columns="columns" :data="eventList" ></Table>
                
            </div>
        </Split>
    </div>
    </Card>
</template>
<script>
export default {
    props:{
            subCompany:{
                type:String,
                default:''
            },
            station:{
                type:String,
                default:''
            },
            category:{
                type:String,
                default:''
            }
    },
    data () {
            return {
                split2: 0.3,
                columns:[{title:'时间',key:'datetime'},{title:'级别',key:'level'},{title:'事件',key:'name'}],
                eventList: [
                    {
                        name: 'John Brown',
                        level: '合规',
                        datetime: '2016-10-03',
                        cellClassName: {
                            level: 'table-cell-conform'
                        }
                    },
                    {
                        name: 'Jim Green',
                        level: '合规',
                        datetime: '2016-10-01',
                        cellClassName: {
                            level: 'table-cell-conform'
                        }
                    },
                    {
                        name: 'Joe Black',
                        level: '合规',
                        datetime: '2016-10-02',
                        cellClassName: {
                            level: 'table-cell-conform'
                        }
                    },
                    {
                        name: 'Jon Snow',
                        level: '合规',
                        datetime: '2016-10-04',
                        cellClassName: {
                            level: 'table-cell-conform'
                        }
                    }
                ],
                fuel_car:103,
                fuel_time:[3,3],
                timer:null,
                worker:{
                    name:'',
                    position:'',//职位
                    no:'',
                },
                against_times:0,//违规次数
                against_perc:0,//违规次数占比
                ischecked:true,//是否巡检
                safebox_open:0,//保险柜打开次数
                case_open:0,//钱箱打开次数
                service_times:0,//累积服务次数
                indoor:0,//累积进店人数
                jam_state:'正常',//加油区拥堵情况
                gun:0,//未指示油枪回零占比
                singlehand:0,//单手加油占比
                woguide:0,//未进行引导占比
                woshow:0,//车到人未到占比
                
                
            }
        },
        created(){
             if(this.category.length>0){
                    clearInterval(this.timer);
                    this.eventList=[];
                    this.Update();
                }
        },
        destroyed(){
            clearInterval(this.timer);
            this.timer = null;
        },
        watch:{
            eventList:function(){
                if(this.eventList.length>50){
                    this.eventList.pop();
                }
            },
            category:function(val, oldVal){
                if(this.category.length>0){
                    clearInterval(this.timer);
                    this.eventList=[];
                    this.Update();
                }
                else{
                    clearInterval(this.timer);
                    this.eventList=[];
                }
            }
        },
         methods:{
             Update(){
                 this.timer = setInterval(()=>{
                    this.addEvent();
                    // this.fetchLatestEvent();
                },1000)
                // console.log('len',this.eventList.length)
             },
             addEvent(){
                 var date=new Date();
                 var newdata={
                        name: 'new data',
                        level: '合规',
                        cellClassName: {
                            level: 'table-cell-conform'
                        },
                        datetime: date
                    };
                this.eventList.unshift(newdata);
                // console.log('len',this.eventList.length)
             },
             iscategory(){
                var result=0;
                if(this.category=='unload')
                    result=1;
                else if(this.category=='refuel_side')
                    result=2;
                else if(this.category=='checkout')
                    result=3
                else if(this.category=='safebox')
                    result=4
                // 6为加油区全景 5为超市大门
                // console.log(result);
                return result;
             }
         }
}
</script>
<style lang="less">
    .ivu-card-body{
        height:100%;
    }
    .demo-split{
         height: calc(100% - 40px);
        // border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding-top: 10px;
    }
    .demo-split-pane-bottom{
        padding-top: 10px;
        height:100%;
    }
    .ivu-split-trigger-horizontal{
        background: none !important;
    }
    .ivu-split-trigger{
        border:none !important;
    }
  
  .ivu-row, p {
       font-size: 1.6rem;
       color:#fff;
       text-align: center;
   }
  
   
    .white {
        font-size:2rem;
        font-weight:700;
        color:#fff;
    }
    
    .reful, .unload, .safebox, .store, .fuel_all, .checkout {
        margin:30px 0px;
        padding-left:40px;
    }
    .underrow {
        margin:20px 0px;
    }
    .ivu-table{
        background-color:#012181 !important;
    }
    .ivu-table .table-cell-conform {
        color: green;
    }
</style>

